<template>
	<div class="solicitationComment">
		<div class="input-box">
			<div class="title">评论</div>
			<van-cell-group>
				<van-field v-model="message" :autosize="oo" type="textarea" maxlength="200" show-word-limit />
				<span class="send" @click="sendMsg">发送</span>
			</van-cell-group>

		</div>
		<div class="commonlist">
			<div class="list-item" v-for="ins in list" :key="ins.id">
				<div class="top">
					<div class="head-img">
						<img :src="ins.user.avatar" alt="">
					</div>
					<div class="info">
						<p class="name">{{ins.user.nickname}}</p>
						<p class="time">{{ins.createtime_text}}</p>
					</div>
				</div>
				<div class="down">

					{{ins.content}}

				</div>

			</div>
			<div class="look-more">
				查看更多
			</div>
		</div>
	</div>
</template>

<script>
	import head from "@/assets/img/head_comment.png"
	export default {
		name: "solicitationComment",
		components: {

		},
		data() {
			return {
				message: "",
				head: head,
				oo: {
					minHeight: 70
				},
				list: [],
				limit: 20,
				page: 1,
				article_id: 0
			}
		},
		methods: {
			getList(id) {
				this.article_id = id
				this.$api.home.collectBack({
					collect_id: this.article_id,
					limit: this.limit,
					page: this.page
				}).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.list = res.data.data
					}

				})
			},
			sendMsg() {
				let sendData = {
					user_id: JSON.parse(this.$getcookie("userInfo")).id,
					token: this.$getcookie("jy_token"),
					site_id: this.$getcookie("site_id") || 0,
					collect_id: this.article_id,
					content: this.message
				}

				this.$api.home.answered(sendData).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.message = ''
						this.$toast.success(res.msg)
						this.getList(this.article_id)
					}else{
						this.$toast.fail(res.msg)
					}



				})
			}
		}
	}
</script>

<style lang="less">
	.solicitationComment {
		margin-top: 1.41rem;
		padding: 1.16rem 1.13rem;
		background: #fff;

		.input-box {
			.title {
				font-size: 0.88rem;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(39, 39, 39, 1);
				margin-bottom: 1.16rem;
			}

			.van-cell {
				padding: 0;

				&:not(:last-child)::after {
					display: none;
				}

				.van-field__control {
					height: 4.81rem;
					border: 1px solid rgba(220, 220, 220, 1);
					border-radius: 0.2rem;
					padding: 0.5rem;
				}

			}

			.send {
				display: inline-flex;
				position: relative;
				top: -0.8rem;
				width: 4.44rem;
				height: 1.94rem;
				background: rgba(254, 119, 0, 1);
				border-radius: 0.1rem;
				justify-content: center;
				align-items: center;
				font-size: 0.88rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
			}

		}

		.commonlist {
			.list-item {
				margin-top: 2rem;


				.top {
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;

					.head-img {
						width: 2.25rem;
						height: 2.25rem;
						border-radius: 50%;
						margin-right: 1.12rem;

						img {
							width: 2.25rem;
							height: 2.25rem;
							object-fit: cover;
							border-radius: 50%;
						}
					}

					.info {
						.name {
							font-size: 0.81rem;
							font-family: PingFang SC;
							font-weight: 500;
							color: rgba(40, 40, 40, 1);
						}

						.time {
							font-size: 0.75rem;
							font-family: PingFang SC;
							font-weight: 500;
							color: rgba(158, 158, 158, 1);
							margin-top: 0.3rem;
						}
					}
				}

				.down {
					margin-top: 1.13rem;
					font-size: 0.81rem;
					font-family: PingFang SC;
					font-weight: 500;
					color: rgba(75, 75, 75, 1);
					line-height: 1.13rem;
				}

			}

			.look-more {
				width: 10rem;
				padding: 0.3rem 1rem;
				margin: 2rem auto;
				font-size: 0.81rem;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(75, 75, 75, 1);
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid rgba(254, 119, 0, 1);
				border-radius: 0.56rem;
				color: rgba(254, 119, 0, 1);
			}
		}

	}
</style>
